<template>
    <div class="box">
        <rolling></rolling>
        <div class="form-container">
            <div class="tab-container">
                <div class="tab active" :class="{ active: activeTab === 'personal' }">牛毕学院☠不收闲人</div>
            </div>

            <van-form class="registration-form" @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="username" type="tel" name="username" label="手机号" placeholder="用户名/Email/手机号"
                        :rules="[{ required: true, message: '手机号不能为空' },
                        { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
                        ]" class="input-field" />

                    <van-field v-model="password" type="password" name="password" label="密码" placeholder="请输入登录密码"
                        :rules="[{ required: true, message: '密码不能为空' },
                        { pattern: /^[a-zA-Z0-9]{8,20}$/, message: '密码格式不正确,请填写8-20位的字母数字' }
                        ]" class="input-field" show-password />

                </van-cell-group>
                <van-button round block type="primary" native-type="submit" class="create-button">登录</van-button>
                <div class="login-link">
                    <span @click="$router.push('/register')">立即注册</span>
                </div>
            </van-form>

        </div>
    </div>

</template>
<script setup>
import { ref, reactive } from 'vue';
import rolling from '../components/rolling.vue';
import http from '../http/index';
import { useRouter } from 'vue-router';
import { showFailToast, showSuccessToast } from 'vant';
const activeTab = ref('personal');
import { useUserStore } from '@/stores/counter';
import { Eye, EyeClosed } from 'vant-icons';
const username = ref(null);
const password = ref(null);

// 叫验手机号
const validatePhone = () => {
    return /^1[3-9]\d{9}$/.test(username.value)
}

// 校验密码
const validatePwd = () => {
    return /^[a-zA-Z0-9]{8,20}$/.test(password.value)
}
const router = useRouter();
const user_store = useUserStore();
const onSubmit = () => {
    if (!validatePhone()) {
        showFailToast({ message: '手机号格式不正确，无法登录', position: 'middle' })
        return
    };

    if (!validatePwd()) {
        showFailToast({ message: '密码格式不正确', position: 'middle' })
        return
    }

    http({
        url: 'login/',
        method: 'POST',
        data: {
            username: username.value,
            password: password.value
        }
    }).then(response => {
        console.log(response)
        if (response.status == 200) {
            showSuccessToast({ message: '登录成功', position: 'middle' })
            user_store.setPhone(username.value)
            alert('登录成功')
            // 登录成功后要跳转的主页
            router.push('/home')
        }
    }).catch(error => {
        console.log(error)
        showFailToast({ message: '密码登录请求失败', position: 'middle' })
        alert('登录失败，请重试')
    })
}
</script>
<style scoped>
.box {
    background-color: #15141A;
}

.form-container {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 400px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.tab-container {
    display: flex;
    margin-bottom: 20px;
    justify-content: center;
}

.tab {
    padding: 10px 20px;
    cursor: pointer;
    font-size: 20px;
    border-bottom: 2px solid transparent;
}

.active {
    border-bottom: 4px solid orange;
    width: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.registration-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.input-field {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}


.create-button {
    background-color: orange;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 20px;
    font-size: 20px;
}

.login-link {
    text-align: center;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.login-link a {
    color: #007BFF;
    text-decoration: none;
}
</style>